import './index.scss';
import plugin from './plugin';

let map = null;
let overlays = [];
let multiPoints = [
  [
    '116.27961508447355,40.049453414029834',
    '116.2801675423622,40.04985729053617',
    '116.2798172032133,40.050264616535344',
    '116.28072000025082,40.050461374825595',
    '116.2815823735404,40.05003679043139',
    '116.28114220384052,40.04954661651461',
  ],
  ['116.27966898280415,40.04863529781763', '116.28142067854861,40.04870778952721'],
];
multiPoints = multiPoints.map((points) => points.map((point) => new BMapGL.Point(...point.split(','))));

function init() {
  plugin();
  initTool();
  initMap();
}

function initTool() {
  const toolEl = document.createElement('div');
  toolEl.style.zIndex = 999;
  toolEl.style.position = 'absolute';
  toolEl.style.top = 0;
  toolEl.style.left = 0;
  toolEl.style.padding = '10px';
  toolEl.style.border = '1px solid black';

  const button = document.createElement('button');
  button.style.cursor = 'pointer';
  button.innerText = '图层显示控制';

  const button2 = button.cloneNode();
  button2.innerText = 'popup尺寸调整';

  toolEl.appendChild(button);
  toolEl.appendChild(button2);
  document.getElementById('app').appendChild(toolEl);

  button.addEventListener(
    'click',
    () => {
      const show = button.getAttribute('data-show') === 'false';
      button.setAttribute('data-show', show);

      overlays.forEach((overlay) => {
        if (show) {
          // overlay.show();
          map.addOverlay(overlay);
        } else {
          // overlay.hide();
          map.removeOverlay(overlay);
        }
      });

      // if (!show) {
      //   map.clearOverlays();
      // }

      setTimeout(() => {
        console.log(map.getOverlays());
      });
    },
    false
  );

  button2.addEventListener(
    'click',
    () => {
      overlays.forEach((overlay) => {
        if (overlay instanceof BMapGLLib.Marker) {
          overlay.domElement.firstChild.style.width = 20 + Math.floor(Math.random() * 40) + 'px';
          overlay.domElement.firstChild.style.height = 20 + Math.floor(Math.random() * 40) + 'px';

          const popup = overlay.getPopup();
          popup.domElement.firstChild.style.width = 150 + Math.floor(Math.random() * 100) + 'px';
          popup.domElement.firstChild.style.height = 80 + Math.floor(Math.random() * 80) + 'px';

          setTimeout(() => {
            overlay.update();
            popup.update();
          });
        }
      });
    },
    false
  );
}

function initMap() {
  const mapEl = document.createElement('div');
  mapEl.style.width = '100%';
  mapEl.style.height = '100%';
  document.getElementById('app').appendChild(mapEl);

  map = new BMapGL.Map(mapEl);
  map.centerAndZoom(new BMapGL.Point(116.28019, 40.049191), 19);
  map.enableScrollWheelZoom(true);
  map.setTilt(70);

  map.addEventListener('click', ({ latlng }) => {
    console.log(latlng.lng + ',' + latlng.lat);
  });

  addMultiPolyline();
  addMarker();
}

function addMultiPolyline() {
  const multiPolyline = new BMapGLLib.MultiPolyline(multiPoints, { strokeColor: 'red' });
  map.addOverlay(multiPolyline);
  overlays.push(multiPolyline);
}

function addMarker() {
  const div = document.createElement('div');
  div.style.width = '40px';
  div.style.height = '40px';
  div.style.border = '1px solid tomato';
  div.style.background = 'rgba(0, 0, 255, 0.5)';

  const popupEl = document.createElement('div');
  popupEl.style.width = '200px';
  popupEl.style.height = '120px';
  popupEl.style.border = '1px solid black';
  popupEl.style.background = 'rgba(255, 255, 255, .75)';

  multiPoints[0].forEach((point) => {
    const marker = new BMapGLLib.Marker(point, div.cloneNode(true), { offset: new BMapGL.Size(0, 0) });
    const popup = new BMapGLLib.Popup(popupEl.cloneNode(true), { offset: new BMapGL.Size(0, -10), visible: true });

    // 动态设置层级
    popup.on('mouseenter', () => {
      popup.setZIndex(999);
    });
    popup.on('mouseleave', () => {
      popup.setZIndex(1);
    });

    marker.bindPopup(popup);

    marker.on('click', () => {
      console.log('marker click');
      if (marker.isPopupOpen()) {
        marker.closePopup();
      } else {
        marker.openPopup();
      }
    });

    marker.on('dblclick', (e) => {
      console.log('marker dblclick');
      e.stopPropagation();
    });

    popup.on('click', () => {
      console.log('popup click');
    });

    map.addOverlay(marker);
    overlays.push(marker);
  });

  multiPoints[1].forEach((point) => {
    const marker = new BMapGL.Marker(point, { offset: new BMapGL.Size(0, 0) });
    map.addOverlay(marker);
    overlays.push(marker);

    marker.on('click', () => {
      console.log('click');
    });
  });

  setTimeout(() => {
    console.log(overlays, map.getOverlays());
  });
}

init();
